<template>
  <view :class="['diy-page', useNav ? 'useFoot' : '']" v-if="page">
    <view class="diy-page-bg" :style="[pageCss]"></view>
    <view
      class="template-section"
      v-for="(item, index) in templates"
      :key="index"
    >
      <!-- 页面头部组件 -->
      <pageHeader
        v-if="item.comName == 'pageHeader'"
        :propsData="item"
      ></pageHeader>
      <!-- 会员信息组件 -->
      <userMember
        v-if="item.comName == 'userMember'"
        :propsData="item"
        :myInfo="myInfo"
      ></userMember>

      <!-- 标题栏组件 -->
      <mumber
        v-if="item.comName == 'mumber'"
        :propsData="item"
        :share_msg="share_msg"
        :has_store="has_store"
      ></mumber>

      <!-- 列表导航组件 -->
      <listNavigation
        v-if="item.comName == 'listNavigation'"
        :propsData="item"
        :share_msg="share_msg"
        :has_store="has_store"
      ></listNavigation>

      <!-- 我的钱包组件 -->
      <userWallet
        v-if="item.comName == 'userWallet'"
        :propsData="item"
        :myInfo="myInfo"
      ></userWallet>
      <view
        class="is-toggle-store-wrap"
        v-if="
          index == 1 &&
          hasSingleStore &&
          is_show_toggle_store > 0 &&
          shenheStatus != 1
        "
      >
        <view class="is-toggle-store">
          <view class="is-toggle-store-txt">是否切换回您的店铺?</view>
          <view class="is-toggle-store-btn">
            <u-button type="success" size="mini" @click="onToggleSelfStore"
              >切换</u-button
            >
          </view>
        </view>
      </view>

      <userTools
        v-if="item.comName == 'userTools'"
        :propsData="item"
        :share_msg="share_msg"
        :has_store="has_store"
        :myInfo="myInfo"
      ></userTools>
      <userRecommend
        v-if="item.comName == 'userRecommend'"
        :propsData="item"
      ></userRecommend>
      <userOrder
        v-if="item.comName == 'userOrder' && isLogin"
        :propsData="item"
        :myInfo="myInfo"
      ></userOrder>
    </view>

    <Copyright ref="copyright"></Copyright>
    <view class="version" v-if="version">当前版本号：{{ version }}</view>
    <controls :controlList="controlList"></controls>
    <footNav :controlList="controlList"></footNav>
  </view>
</template>

<script>
import listNavigation from "./listNavigation/index.vue";
import mumber from "./mumber/index.vue";

import userMember from "./userMember/index.vue";
import userWallet from "./userWallet/index.vue";
import userTools from "./userTools/index.vue";
import userRecommend from "./userRecommend/index.vue";
import userOrder from "./userOrder/index.vue";
import controls from "@/components/diyNew/controls/index.vue";
import pageHeader from "@/components/diyNew/pageHeader/index.vue";
import footNav from "@/components/diyNew/footNav/index.vue";
import version from "@/version";
import { tabBarData as controlsData, userTemplate } from "@/common/jsonData.js";
import Copyright from "./Copyright";
export default {
  components: {
    userMember,
    userOrder,
    controls,
    userWallet,
    listNavigation,
    mumber,
    userTools,
    userRecommend,
    pageHeader,
    footNav,
    Copyright
  },
  data() {
    return {
      templates: [],
      page: null,
      controlList: [],
      useNav: false,
      myInfo: {},
      isLogin: true,
      isAdmin: 0,
      share_msg: null,
      is_show_toggle_store: 0,
      has_store: 0,
      version: ""
    };
  },
  computed: {
    pageCss() {
      if (this.page) {
        let pageCss = JSON.parse(JSON.stringify(this.page.pageCss));
        if (pageCss?.padding) delete pageCss.padding;
        if (pageCss?.borderRadius) delete pageCss.borderRadius;
        return pageCss;
      } else {
        return "";
      }
    },
    is_shenhe() {
      return this.$store.getters.stores.shenhe === "1";
    }
  },
  mounted() {
    this.version = version.version;
    this.readyRequest();
  },
  onShow() {},
  watch: {},
  methods: {
    onToggleSelfStore() {
      uni.showModal({
        title: "提示",
        content: "确定要切换到您自己的店铺吗?",
        success: (result) => {
          if (result.confirm) {
            // uni.setStorageSync("store_id", this.is_show_toggle_store);
            // uni.removeStorageSync("storeMdData");
            // uni.removeStorageSync("token");
            // uni.removeStorageSync("userInfo");
            // uni.removeStorageSync("cacheStoreList");
            // uni.removeStorageSync("wx_login_code");

            uni.showLoading({
              title: "切换中"
            });
            this.$allrequest.user
              .switchStoreAutoLogin({
                switch_store_id: this.is_show_toggle_store
              })
              .then((res) => {
                if (res.code == 0) {
                  uni.removeStorageSync("cacheStoreList");
                  uni.removeStorageSync("storeMdData");
                  uni.removeStorageSync("wx_login_code");
                  uni.setStorageSync("userInfo", res.data.user_info);
                  this.$store.commit("setStoreId", this.is_show_toggle_store);
                  this.$utils.toUrl("/pages/home/home", "reLaunch");
                } else {
                  uni.showToast({
                    title: "切换失败",
                    icon: "none"
                  });
                }
              })
              .then(() => {
                uni.hideLoading();
              });
          }
        }
      });
    },
    // 获取diy系统页面配置数据
    getDiySystemPages() {
      this.$allrequest.diyNew.getDiySystemPages({}, true).then((res) => {
        uni.stopPullDownRefresh();
        if (!res.code) {
          let list = res.data.list;
          let data = {};
          if (!list.length) return;
          list.forEach((d) => {
            d.template = JSON.parse(d.template);
            if (d.template.system_type == "my") {
              data = d;
            }
          });
          if (!data?.id) return;
          this.page = data.template;
          this.templates = data.template.templates;
          res.data.controls = JSON.parse(res.data.controls);
          this.controlList = res.data.controls;
          // 审核模式导航栏,template
          if (this.shenheStatus == 1) {
            this.controlList = controlsData;
            this.templates = userTemplate;
          }

          let [footNav] = this.controlList.filter((d) => {
            return d.show_type == "nav";
          });
          if (footNav && footNav.is_show) {
            this.useNav = true;
          }
        }
      });
    },
    getuserinfo(getDiy = true) {
      this.$allrequest.request.userindex({}, false).then((res) => {
        uni.hideLoading();
        if (res.code == 0) {
          this.myInfo = res.data;
          if (res.data.user_info && res.data.user_info.id > 0) {
            uni.setStorageSync("userInfo", res.data.user_info);
          }

          if (getDiy) {
            this.getDiySystemPages();
          }
          if (this.hasSingleStore) {
            this.is_show_toggle_store = res.data.user_info.is_show_toggle_store;
            this.has_store = res.data.user_info.has_store;
          }
          if (res.data.share_msg) {
            this.share_msg = res.data.share_msg;
          }
        }
      });

      this.$refs.copyright && this.$refs.copyright.init();
    },
    readyRequest() {
      this.page = null;
      if (this.$utils.isLogin(false)) {
        this.getuserinfo();
        this.isLogin = true;
      } else {
        this.isLogin = false;
        this.myInfo = {};
        this.getDiySystemPages();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.diy-page {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  .diy-page-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.useFoot {
  padding-bottom: 120rpx;
  padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}
.is-toggle-store-wrap {
  padding: 20rpx;
  padding-top: 0;
}
.is-toggle-store {
  background-color: #fff;
  padding: 30rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20rpx;
}

.version {
  padding-top: 10rpx;
  text-align: center;
  font-size: 28rpx;
  color: #999;
}
</style>
